<template>
  <div class="factory-content">
    <Row class="search">
      <ul>
        <li>
          <span>科室:</span>
          <Select class="select" clearable v-model="typeId">
            <Option
              v-for="item in filterSelect"
              :value="item.departmentId"
              :key="item.departmentId"
            >{{item.departmentName}}</Option>
          </Select>
        </li>

        <li class="bg-light">
          <h3>未授权经销商</h3>
        </li>
        <li>
          <span>
            <Checkbox v-model="isSelectAll" @on-change="onSelectAll">全选</Checkbox>
          </span>
          <span>科室</span>
          <span>地区</span>
          <span>经销商</span>
        </li>
        <li
          v-for="(item, idx) in changeListNotSelect"
          :key="item.idx"
          @click="onSelectItem(item, idx)"
        >
          <span>
            <Checkbox v-model="item.checked" />
          </span>
          <span>{{item.departmentName}}</span>
          <span>{{item.secondaryDepartmentName}}</span>
          <span>{{item.distributorName}}</span>
        </li>
        <li v-if="!changeListNotSelect.length">暂无数据！</li>
      </ul>
      <ul>
        <li>
          <span>科室:</span>
          <Select class="select" clearable v-model="typeId1">
            <Option
              v-for="item in filterSelectTwo"
              :value="item.departmentId"
              :key="item.departmentId"
            >{{item.departmentName}}</Option>
          </Select>
        </li>
        <li class="bg-light">
          <h3>已授权经销商</h3>
        </li>
        <li>
          <span></span>
          <span>科室</span>
          <span>地区</span>
          <span>经销商</span>
        </li>
        <li
          v-for="item in hasListWithSelect"
          :key="item.distributorId"
          :style="item.unsign?'background: #d1d1d1':''"
          @click="onCancelSelectItem(item)"
        >
          <span>
            <Checkbox v-model="item.checked" v-show="!item.owner" />
          </span>
          <span>{{item.departmentName}}</span>
          <span>{{item.secondaryDepartmentName}}</span>
          <span>{{item.distributorName}}</span>
        </li>
        <li v-if="!hasListWithSelect.length">暂无数据！</li>
      </ul>
    </Row>
  </div>
</template>
<script>
import { getOriginData } from "@/util";
export default {
  props: {
    distributorData: {
      type: Array,
      default: () => []
    },
    hasDistributorData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      id: this.$route.query.id || "",
      typeId: "",
      typeId1: "",
      modal: false,
      title: "维护人变更",
      resignBrand: "",
      distributorData: [],
      hasDistributorData: [],
      loading: false,
      isSelectAll: false,
      isSelectNotAll: false
    };
  },
  mounted() {
    // this.filterSelect()
  },
  computed: {
    changeListNotSelect() {
      let arr = getOriginData(this.distributorData);
      if (this.typeId) {
        arr = arr.filter(e => {
          return e.departmentId == this.typeId;
        });
        return arr;
      } else {
        return arr.filter(e => !e.checked);
      }
    },
    /**
     * @desc 下拉框的名称去重
     */
    filterSelect() {
      let obj = {};
      let arr = [];
      arr = getOriginData(this.distributorData).reduce(function(item, next) {
        obj[next.departmentId]
          ? ""
          : (obj[next.departmentId] = true && item.push(next));
        return item;
      }, []);
      return arr;
    },
    filterSelectTwo() {
      let obj = {};
      let arr = [];
      arr = getOriginData(this.hasDistributorData).reduce(function(item, next) {
        obj[next.departmentId]
          ? ""
          : (obj[next.departmentId] = true && item.push(next));
        return item;
      }, []);
      return arr;
    },
    hasListWithSelect() {
      let arr = this.hasDistributorData;
      arr = arr.map(item => {
        if (item.checked) {
          item.unsign = true;
        } else {
          item.unsign = false;
        }
        item.owner = true;
        return item;
      });
      if (this.typeId1) {
        arr = arr.filter(e => {
          return e.departmentId == this.typeId1;
        });
      }
      return arr.concat(this.distributorData.filter(e => e.checked));
    }
  },
  methods: {
    onSelectItem(item) {
      let idx = this.distributorData.findIndex(
        e => e.distributorId === item.distributorId
      );
      item.checked = true;
      this.$set(this.distributorData, idx, item);
      let x = this.distributorData.filter(it => it.checked);
      // 传递给父组件使用数据
      this.$emit("sendParentData", x);
    },

    onSelectAll(val) {
      if (val) {
        this.distributorData = this.distributorData.map(item => {
          item.checked = true;
          return item;
        });
        let x = this.distributorData.filter(it => it.checked);
      // 传递给父组件使用数据
      this.$emit("sendParentData", x);
      } else {
        this.distributorData = this.distributorData.map(item => {
          item.checked = false;
          return item;
        });
      }
    },
    // onSelectAll1(val) {
    //   if (val) {
    //     this.distributorData = this.distributorData.map(item => {
    //       item.checked = false;
    //       return item;
    //     });
    //   }
    // },
    onCancelSelectItem(item) {
      let idx = this.hasDistributorData.findIndex(
        e => e.distributorId === item.distributorId
      );
      if (idx > -1) {
        let h = this.hasDistributorData[idx];
        h.checked = !h.checked;
        this.$set(this.hasDistributorData, idx, h);
      } else {
        // this.isSelectAll = false;
        item.checked = false;
        this.distributorData = this.distributorData.map(e => {
          if (e.distributorId === item.distributorId) return item;
          return e;
        });
      }
    }
  }
};
</script>
